<template>
  <div
    id="commonFoot"
    class="lg:hidden shadow-lg shadow-black-light flex z-[1000] justify-evenly items-center w-[260px] h-14 bg-[#2E2E2E] rounded-3xl fixed bottom-4 left-[50%] translate-x-[-50%]">
    <NuxtLink
      external
      @click.native.capture="item.handle && item.handle($event)"
      :to="$localePath(item.url)"
      v-for="(item, index) in iconList"
      :key="index">
      <WImage class="w-12 h-10" :src="useAsset($localePath(item.url) === route.path ? item.img2 : item.img1)" />
    </NuxtLink>
  </div>
</template>

<script setup lang="ts">
import WImage from '~/components/logic/WImage.vue'
import { useCategoryStore } from '~/store/category'
import { useMemberStore } from '~/store/member'
const { $pushRoute } = useCommonPlugin()
const { isLogin } = storeToRefs(useMemberStore())
const route = useRoute()
const categoryStore = useCategoryStore()
const { categoryTree } = storeToRefs(categoryStore)
const iconList = computed(() => [
  {
    img1: 'foot-icon/tabBar_home1@2x.png',
    img2: 'foot-icon/tabBar_home0@2x.png',
    url: '/',
  },
  {
    img1: 'foot-icon/tabBar_category1@2x.png',
    img2: 'foot-icon/tabBar_category0@2x.png',
    url: `/category/${categoryTree.value[0]?.id}/1`,
  },
  {
    img1: 'foot-icon/tabBar_me1@2x.png',
    img2: 'foot-icon/tabBar_me0@2x.png',
    handle: (e) => {
      if (isLogin.value) return
      e.preventDefault()
      e.stopPropagation()
      return $pushRoute('/sso/login')
    },
    url: '/user',
  },
])
</script>

<style scoped lang="scss">
#commonFoot {
}
</style>
